<script setup lang="ts">
import {ref, onMounted, watchEffect, watch} from "vue";
import {useRoute} from "vue-router";
import {getDetailBannerApi, getHotApi, getWeekHotApi, getDetailApi, getAddressApi} from '@/api/details/index'
import bwPowerSet from '@/utils/sku/power-set'
import {ElMessage} from "element-plus";
import {carsInfoStore} from "@/stores/cars";
import {useSku} from "@/hook/sku";

//公共
onMounted(() => {
  getDetailBanner()
  getDayHot()
  getWeekHot()
  getDetailData()
  getAddress()
});
//当前路由信息
const route = useRoute();
//商品详情
const detailData = ref([])
//加载图标
const loading = ref(true);
//小图标下标
const smallImgIndex = ref(0);
//小图片
const smallImg = ref([])
//大图标
const bigImg = ref(0)
//字典
let skuMap = {}
//使用hook
let skuHook = useSku()
//skuID
// let skuIdObj: any = skuHook.skuIdObj
//购物车数据
const cartData = carsInfoStore()


//数据
async function getDetailData() {
  let res = await getDetailApi(route.params.id)
  if (res.msg == '操作成功') {
    loading.value = false
    detailData.value = res.result
    smallImg.value = detailData.value.mainPictures

    skuMap = skuHook.getValidSku(detailData.value)
    skuHook.initDisable(detailData.value.specs, skuMap)

    //初始化大图标
    if (smallImgIndex.value == 0) {
      bigImg.value = smallImg.value[0]
    }
  }
}


//小图标选择
function smallImgCheck(item: any, index: number) {
  smallImgIndex.value = index
  bigImg.value = item
}

//把数组分成对应等份
function splitArrayIntoEqualParts(arr: any, partsCount: number) {
  if (arr.length % partsCount !== 0) {
    throw new Error('Array length is not divisible by the number of parts');
  }

  const chunkSize = arr.length / partsCount;
  const result = [];

  for (let i = 0; i < arr.length; i += chunkSize) {
    // 注意：这里使用slice会创建新的数组，但它包含的是对原数组中元素的引用
    result.push(arr.slice(i, i + chunkSize));
  }

  return result;
}


//点击判断 根据库存修改可用
function checkSizeAndColor(item: any, val: any) {
  //初始化数量
  num.value = 1
  skuHook.changeSku(item, val, detailData, skuMap)
}


//轮播部分

//首页轮播数据
const swiperData = ref([]);

//获取bannerApi
async function getDetailBanner() {
  let res = await getDetailBannerApi(route.params.id)
  if (res.msg == '操作成功') {
    swiperData.value = res.result
    swiperData.value = splitArrayIntoEqualParts(swiperData.value, 4)
  }
}


//当天热榜
const dayHotData = ref([])


async function getDayHot() {
  let res = await getHotApi(route.params.id)
  if (res.msg == '操作成功') {
    dayHotData.value = res.result
  }

}

//周热榜
const weekHotData = ref([])

async function getWeekHot() {
  let res = await getWeekHotApi(route.params.id)
  if (res.msg == '操作成功') {
    weekHotData.value = res.result
  }
}


//数字
let num = ref(1);

//获取地址
const addressData = ref([])
const addressValue = ref('')

//修改数控组件的属性名 与 地址数据名相同
let defaultProps = {
  children: 'areaList', // 指定子节点的属性名
  label: 'name', // 指定节点标签的属性名
  value: 'code'   // 指定节点值的属性名
}

//获取地址数据
async function getAddress() {
  let res = await getAddressApi()
  addressData.value = res
}


//地址改变
function addressChange(value, obj) {
  if (obj.parent.data.name) {
    //祖父
    let grandFatherAddress = obj.parent.parent.data.name ? obj.parent.parent.data.name : ''
    //这是父亲的
    let fatherAddress = obj.parent.data.name
    //这是当前的
    let nowAddress = obj.data.name
    addressValue.value = `${grandFatherAddress} ${fatherAddress} ${nowAddress}`
  }
}


function handleCommand(command: string) {
  console.log(command);
}


//数字变化
function handleNumChange(value: number) {
  num.value = value
}


//加入购物车
function addCart() {

  //响应式数据
  let skuIdObj = skuHook.skuIdObj.value

  //如果不是完整的sku就不添加到购物车并阻止默认事件并提示
  if (!skuHook.skuIdObj) {
    ElMessage.warning('请选择完整得规格！');
    return;
  }
  //处理商品数据
  let res = skuIdObj.specs.map(item => {
    return `${item.name}:${item.valueName}`
  })
  //商品数据
  let goodsInfo = ref({
    //商品规格
    attrsText: res.join(' '),
    //商品数量
    count: num.value,
    //商品id
    id: detailData.value.id,
    //商品名称
    name: detailData.value.name,
    //商品图片
    picture: detailData.value.mainPictures[smallImgIndex.value],
    //商品价格
    price: skuIdObj.price,
    //商品规格id
    skuId: skuIdObj.id,
    //是否选中
    selected: true,
  })
  //添加到购物车
  cartData.getCarInfo(goodsInfo.value)
}


</script>

<template>
  <div class="details">
    <div class="details-heart" v-loading="loading" element-loading-background="#ffffff">
      <!--      商品模块-->
      <div class="product">
        <div class="product-left">
          <div class="product--left-image">
            <div class="product-left-image-big">
              <img :src="bigImg">
            </div>
            <div class="product-left-image-small">
              <div class="plis-item" v-for="(item,index) in detailData.mainPictures" :key="index"
                   @mouseenter="smallImgCheck(item,index)" :class="{activeCheck:smallImgIndex===index}">
                <img v-lazy-img="item">
              </div>
            </div>
          </div>
          <div class="product-left-info">
            <div class="product-left-info-item">
              <p>销量人气</p>
              <span>123+</span>
              <p><i class="iconfont icon-zan"></i>销量人气</p>
            </div>
            <div class="product-left-info-item">
              <p>销量人气</p>
              <span>123+</span>
              <p><i class="iconfont icon-pinglun"></i>查看评价</p>
            </div>
            <div class="product-left-info-item">
              <p>销量人气</p>
              <span>123+</span>
              <p><i class="iconfont icon-shoucang"></i> 收藏商品</p>
            </div>
            <div class="product-left-info-item">
              <p>销量人气</p>
              <span>123+</span>
              <p><i class="iconfont icon-pinpai"></i>品牌主页</p>
            </div>
          </div>
        </div>
        <div class="product-right">
          <div class="product-right-title">
            <h2>{{ detailData.name }}</h2>
          </div>
          <div class="product-right-desc">
            <span>{{ detailData.desc }}</span>
          </div>
          <div class="product-right-price">
            <span class="new-price">{{ detailData.price }}</span>
            <del class="old-price">¥{{ detailData.oldPrice }}</del>
          </div>
          <div class="product-right-address">
            <div class="address-top">
              <span class="address-top-left">促销</span>
              <span class="address-top-right">12月好物放送，App领券购买直降120元</span>
            </div>
            <div class="address-middle">
              <span class="address-top-left">配送至</span>
              <span class="address-top-right">
                 ` <el-tree-select
                      :model-value="addressValue"
                      :data="addressData"
                      :props="defaultProps"
                      node-key="code"
                      :render-after-expand="false"
                      style="width: 240px"
                      @current-change="addressChange"
                      :accordion="true"
                      placeholder="请选择地址"
                  />`
              </span>
            </div>
            <div class="address-bottom">
              <span class="address-top-left">服务</span>
              <div class="address-top-right">
                <div class="product-right-service-item"><span>7天无理由退换</span></div>
                <div class="product-right-service-item"><span>7天无理由退换</span></div>
                <div class="product-right-service-item"><span>7天无理由退换</span></div>
                <div class="product-right-service-item"><span>7天无理由退换</span></div>
              </div>
            </div>
          </div>

          <div class="product-right-size" v-for="(item,index) in detailData.specs">
            <div class="product-right-size-title">
              <span>{{ item.name }}</span>
            </div>
            <div class="product-right-size-content">
              <div class="product-right-size-item" :class="{activeCheck:val.selected,disable:val.disable}"
                   v-for="(val,valIndex) in item.values" :key="valIndex"
                   @click="checkSizeAndColor(item,val)">
                <img :src='val.picture' v-if="val.picture">
                <span v-else>{{ val.name }}</span>
              </div>
            </div>
          </div>
          <div class="product-right-count">
            <div class="product-right-count-title">
              <span>数量</span>
            </div>
            <div class="product-right-count-content">
              <el-input-number v-model="num" :min="1" :max="10" @change="handleNumChange"/>
            </div>
          </div>
          <div class="product-right-buy" @click="addCart">
            <span>加入购物车</span>
          </div>
        </div>
      </div>
      <!--      推荐模块-->
      <div class="recommend">
        <div class="recommend-title">
          <i class="iconfont icon-dingwei"></i>
          <h2>同类商品</h2>
        </div>
        <div class="recommend-content">
          <el-carousel :interval="5000" arrow="always">
            <el-carousel-item v-for="(item,index) in swiperData" :key="index">
              <div class="recommend-list">
                <div class="recommend-item" v-for="swpItem in item" :key="swpItem.id">
                  <div class="recommend-item-image">
                    <img v-lazy-img="swpItem.picture">
                  </div>
                  <div class="recommend-item-info">
                    <span>{{ swpItem.name }}</span>
                  </div>
                  <div class="recommend-item-price">
                    <span>¥{{ swpItem.price }}</span>
                  </div>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <!--      商品详情模块-->
      <div class="product-details">
        <div class="product-details-left">
          <div class="product-details-left-title">
            <div class="product-particulars"><span>商品详情</span></div>
            <div class="product-evaluate"><span>商品评价</span> <span>(0)</span></div>
          </div>
          <div class="product-details-left-introduce">
            <div class="introduce-item" v-for="(item,index) in detailData.details?.properties" :key="index">
              <div class="introduce-item-title-left"><span>{{ item.name }}</span></div>
              <div class="introduce-item-title-right">
                <span>{{ item.value }}</span></div>
            </div>
          </div>
          <div class="product-details-left-image">
            <div class="img-item" v-for="(item,index) in detailData.details?.pictures" :key="index">
              <img v-lazy-img="item">
            </div>
          </div>
        </div>
        <div class="product-details-right">
          <div class="day-hot">
            <div class="day-hot-title">
              <span>今日热销</span>
            </div>
            <div class="date-hot-content">
              <div class="day-hot-item" v-for="item in dayHotData" :key="item.id">
                <div class="day-hot-item-image">
                  <img v-lazy-img="item.picture">
                </div>
                <div class="day-hot-item-info">
                  <p>{{ item.name }}</p>
                  <p>{{ item.desc }}</p>
                </div>
                <div class="day-hot-item-price">
                  <span>¥{{ item.price }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="week-hot">
            <div class="day-hot-title">
              <span>周报热销</span>
            </div>
            <div class="date-hot-content">
              <div class="day-hot-item" v-for="item in weekHotData" :key="item.id">
                <div class="day-hot-item-image">
                  <img v-lazy-img="item.picture">
                </div>
                <div class="day-hot-item-info">
                  <p>{{ item.name }}</p>
                  <p>{{ item.desc }}</p>
                </div>
                <div class="day-hot-item-price">
                  <span>¥{{ item.price }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.details {
  width: 100%;
  background-color: #f5f5f5;
  padding-top: 2.5rem;
  box-sizing: border-box;
}

.details-heart {
  width: var(--primary-heart-width);
  margin: 0 auto;
}

.product {
  background-color: #fff;
  padding: 2.5rem 4.166rem;
  box-sizing: border-box;
  display: flex;
  gap: 4.166rem;
}

/* 左侧 图片*/
.product-left {
  flex: 1;
}

.product--left-image {
  display: flex;
  gap: 0.833rem;
}

.product-left-image-big {
  flex: 6;
  width: 100%
}

.product-left-image-big img {
  width: 100%;
  object-fit: cover;
}

.product-left-image-small {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.plis-item {
  width: 100%;
}

.plis-item img {
  width: 100%;
  object-fit: cover;
}

.product-left-info {
  display: flex;
  margin-top: 1.66rem;
}

.product-left-info-item p, .product-left-info-item span {
  font-size: 1.2rem;
}

.product-left-info-item p:nth-child(1) {
  color: #999;
}

.product-left-info-item span {
  color: #cf4444;
}

.product-left-info-item p:nth-child(3) {
  color: #666;
}

.product-left-info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.41rem;
  padding-right: 0.83rem;
  padding-left: 0.83rem;
  box-sizing: border-box;
  border-right: 1px solid #e4e4e4;
}

.product-left-info-item:last-child {
  padding-right: 0;
  border-right: none;
}

.product-left-info-item i {
  color: var(--primary-color);
}

/* 右侧 信息*/
.product-right {
  flex: 1;
}

.product-right-title h2 {
  font-size: 1.8rem;
  font-weight: 400;
  color: #333;
}

.product-right-desc {
  margin-top: 0.41rem;
}

.product-right-desc span {
  color: #999;
  font-size: 1.2rem;
}

.product-right-price {
  margin-top: 0.41rem;
  display: flex;
  gap: 0.83rem;
  align-items: center;
}

.product-right-price .new-price {
  font-size: 1.83rem;
  color: #cf4444;

}

.product-right-price .old-price {
  font-size: 1.33rem;
  color: #999;
}

.product-right-address {
  background-color: #f5f5f5;
  padding: 1.66rem 0.83rem;
  box-sizing: border-box;
  margin-top: 0.41rem;
  display: flex;
  flex-direction: column;
  gap: 1.66rem;
}

.address-top-left {
  color: #999;
  font-size: 1.16rem;
  display: inline-block;
  margin-right: 4.16rem;
}

.address-top-right {
  font-size: 1.16rem;
}

.address-bottom {
  display: flex;
}

.address-bottom .address-top-right {
  display: flex;
  gap: 0.83rem;
  color: #666;
}

.address-bottom .address-top-right .product-right-service-item:last-child {
  color: var(--primary-color);
}

.product-right-service-item span {
  cursor: pointer;
}

.product-right-size {
  margin-top: 1.66rem;
}

.product-right-size-title span, .product-right-color-title span, .product-right-count-title span {
  display: inline-block;
  font-size: 1.16rem;
  color: #999;
  width: 2.5rem;
}

.product-right-color, .product-right-size, .product-right-count {
  display: flex;
  gap: 1.66rem;
}

.product-right-count {
  margin-top: 1.66rem;
}

.product-right-size-content {
  display: flex;
  flex-wrap: wrap;
  gap: 0.83rem;
}

.product-right-size-item {
  border: 2px solid #e4e4e4;
  cursor: pointer;
}

.product-right-size-item span {
  display: inline-block;
  height: 2.5rem;
  line-height: 2.5rem;
  text-align: center;

  font-size: 1.16rem;
  padding: 0 1.66rem;
  box-sizing: border-box;
}

.product-right-size-item img {
  display: inline-block;
  width: 6.25rem;
  height: 6.25rem;
  object-fit: cover;
}

.product-right-buy {
  margin-top: 1.66rem;
}

.product-right-buy span {
  font-size: 1.33rem;
  display: inline-block;
  color: #fff;
  background-color: var(--primary-color);
  padding: 0.83rem 4.16rem;
  box-sizing: border-box;
  border-radius: 0.41rem;
  cursor: pointer;
}

.recommend {
  width: 100%;
  margin-top: 1.66rem;
  background-color: #fff;
  padding: 1.66rem 1.66rem;
  box-sizing: border-box;
}

.recommend-content {
  margin-top: 4.16rem;
}

.recommend-title {
  display: flex;
  align-items: center;
  gap: 0.41rem;
}

.recommend-title h2 {
  font-weight: 400;
  font-size: 1.66rem;
}

.recommend-title i {
  color: var(--primary-color);
  font-size: 1.66rem;
}


.recommend-item-image img {
  width: 19.16rem;
  height: 19.16rem;
  object-fit: cover;
}

.recommend-list {
  display: flex;
  justify-content: space-evenly;
}

.recommend-item-info {
  width: 12.5rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.recommend-item-info span {
  font-size: 1.16rem;
  color: #666;

}

.recommend-item-info {
  text-align: center;
}

.recommend-item-info span {
  font-size: 1.16rem;
  color: #666;
}

.recommend-item-price span {
  font-size: 1.66rem;
  color: #cf4444;
}

.product-details {
  margin-top: 1.66rem;
  display: flex;
  gap: 0.83rem;
  padding-bottom: 1.66rem;
  box-sizing: border-box;
}


.product-details-left {
  flex: 5;
  background-color: #fff;
  padding: 1.66rem 2.5rem;
  box-sizing: border-box;
}

.product-details-right {
  flex: 1;
}

.day-hot-item-image {
  width: 100%;
}

.day-hot-item-image img {
  width: 100%;
  object-fit: cover;
}

.product-details-left-title {
  display: flex;
  font-size: 1.5rem;
  color: #333;
  border-bottom: 1px solid #e4e4e4;
}

.product-particulars {
  padding-right: 1.66rem;
  padding-bottom: 1.66rem;
  box-sizing: border-box;
  border-right: 1px solid #e4e4e4;
}

.product-particulars span {
  padding-bottom: 1.66rem;
}

.product-evaluate {
  padding-left: 1.66rem;
  box-sizing: border-box;
  border-left: 1px solid #e4e4e4;
}

.product-evaluate span:last-child {
  color: #cf4444;
}

.product-details-left-introduce {
  margin-top: 4.16rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.66rem;
}

.introduce-item {
  display: flex;
}

.introduce-item-title-left {
  width: 8.33rem;
}

.introduce-item-title-right {
  flex: 1;
}

.introduce-item-title-left span {
  font-size: 1.16rem;
  color: #999;
}

.introduce-item-title-right span {
  font-size: 1.16rem;
  color: #333;
}

.product-details-left-image {
  margin-top: 4.16rem;
}

.img-item {
  width: 100%;
}

.img-item img {
  width: 100%;
}

.day-hot-title span {
  display: inline-block;
  height: 5.83rem;
  background-color: #e26237;
  color: #fff;
  width: 100%;
  font-size: 1.5rem;
  line-height: 5.83rem;
  text-align: center;
  margin-bottom: 0.83rem;
}

.day-hot-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  padding: 1.66rem 2.5rem;
  box-sizing: border-box;
  margin-bottom: 0.83rem;
}

.day-hot-item-info {
  width: 16.66rem;
  margin: 0.83rem 0;
}

.day-hot-item-info p {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.day-hot-item-info p:nth-of-type(1) {
  font-size: 1.33rem;
  color: #333;
}

.day-hot-item-info p:nth-of-type(2) {
  font-size: 1.14rem;
  color: #999;
}

.day-hot-item-price span {
  font-size: 1.66rem;
  color: #cf4444;

}

.week-hot {
  margin-top: 0.83rem;
}


.activeCheck {
  border: 2px solid var(--primary-color);
}

.active {
  border-bottom: 2px solid var(--primary-color);
}

.disable {
  cursor: not-allowed;
  opacity: 0.5;
  border-style: dashed;
}
</style>